<%@ page contentType="text/html;charset=utf-8" language="java"%>
<!DOCTYPE html>
<%@include file="./common/base.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有而就是有范儿</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/qiniu.js"></script>
</head>

<body>
<div class="outer-wrapper outer-wrapper-h" >
	<!--Top navigator -->
<%@ include  file="./common/header.jsp"%>
    <!--content -->
    <div class="content clear">
    	<div class="user-edit">
    		<!--user infor edit -->
        	<div class="user-edit-info" id="user-edit-info">
            	<div class="user-private-top"></div>
                <!--form box  -->
                <div class="form-user form-edit">
                <p class="tip">点击信息编辑</p><br>
            	<form method="#" action="#" name="form-edit">
                <input type="hidden" name="cardIdName" id="cardId"  value="地点"/>
				<input type="text" value="" class="user-title" id="user-title" placeholder="花名" onfocus="if(this.value=='名称（9字以内）') {this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='名称（9字以内）';this.style.color='#666';}"maxlength="9"/>
                <p><textarea class="edit-description" style="overflow:hidden" placeholder="描述（25字以内）" id="edit-description" onfocus="if(this.value=='描述（25字以内）') {this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='描述（25字以内）';this.style.color='#666';}"maxlength="25"></textarea>
                </p>
                <p class="yourcity">
                	<input type="text" name="yourcity" id="yourcityId" class="edit-infor" placeholder="地点" value="" onfocus="if(this.value=='地点（6字以内）') {this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='地点（6字以内）';this.style.color='#666';}"maxlength="6"/>
                </p>
                <p class="career">
                	<input type="text" name="career" id="careerId" class="edit-infor" placeholder="职业" value="" onfocus="if(this.value=='职业（6字以内）') {this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='职业（6字以内）';this.style.color='#666';}"maxlength="6"/>
                </p>
                <p class="interest">
                	<input type="text" name="interest" id="interestId" class="edit-infor" placeholder="兴趣" value="" onfocus="if(this.value=='最多1个标签') {this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='最多3个标签';this.style.color='#666';}"maxlength="5"/>
                </p>
                </form>
                </div><!--from box end- -->
        	</div>
        	<!-- user infor edit end-->
            <!--undefinde area -->
            <div class="undefinde-area" id="undefinde-area">
            	<div class="user-private-top"><br> <span style="padding-left:70px;line-height:22px;">填写你的网络连接，如 ：微博、社交页面、博客、电商、个人主页、爱好的<br><span style="padding-left:50px;">视频或者网站等。让好友顿感不明觉厉的你...</span></span></div>
            	
                <!--form box  -->
                <div class="form-user form-undefinde">
               <br>
            	<form  name="form-edit">
            	
                	<p><label for="social-1">建议微博</label><input type="text" name="social-1"  id= "link1Id" class="social"/></p>
                    <p><label for="social-2">建议社交</label><input type="text" name="social-2"  id= "link2Id" class="social"/></p>
                    <p><label for="social-3">建议博客</label><input type="text" name="social-3"  id= "link3Id" class="social"/></p>
                    <p><label for="social-4">建议电商</label><input type="text" name="social-4"  id= "link4Id" class="social"/></p>
                    <p><label for="social-5">个人主页</label><input type="text" name="social-5"  id= "link5Id" class="social"/></p>
                    <!--  <p style="position:relative;"><label for="wechat-2code">微信二维码</label>
                    	<input type="button" value="上传" class="upload" onClick="up_qrcode.click()"/>
                        <input type="file" name="wechat-2code"  class="uploading" id="up_qrcode" style="display:none;" id="uploading"/>
                       
                    </p>
                    	<div class="wechat-preview" id="wechat-preview"></div>-->
                    <p style="position:relative;">
                    	<label>按键颜色</label>
                        <span class="bg_color">                        	
                            <span class="c1 " id="c1Id" onclick="selectStyle(1)"></span><!-- current-on -->
                            <span class="c2" id="c2Id"  onclick="selectStyle(2)" ></span>
                            <span class="c3" id="c3Id" onclick="selectStyle(3)"></span>
                            <span class="c4" id="c4Id" onclick="selectStyle(4)"></span>
                            <span class="c5" id="c5Id" onclick="selectStyle(5)"></span>
                            <span class="c6" id="c6Id" onclick="selectStyle(6)"></span>
                            <!--  <span class="c7" id="c7Id" onclick="selectStyle(7)"></span>
                            <span class="c8" id="c8Id" onclick="selectStyle(8)"></span>-->
                        </span>
                    </p>
                    <p style="position:relative;" id = "up_bg_img_parentId">
                    	<label>背景图片</label>
                        <input type="button" value="上传" class="upload" onClick="up_bg_img.click()"/><br><span style="padding-left:90px;">(建议上传像素为1280 x 800的美图噢)</span>
                        <input type="file" name="up_bg_img"  class="uploading" id="up_bg_img" style="display:none;"/>
                    </p>
                    <p style="margin-left:90px;" >
                    	<img src ="" width = 150 id ="backgroundId" border=0 onerror=this.style.width=0 />
                        <input type="hidden" id="backgroundValId"></input>
                    </p>
                    <input type="button" name="submit" class="btn user-sumit-btn" value="应用" onclick="editCard()"/>
                </form>
                </div><!--form box end -->
            </div>
            <!--undefinde area -->
        </div>	
    </div><!--content end -->
        <!--footer -->
   <%@ include  file="./common/footer.jsp"%>
    <!--footer end -->
</div>


</body>
<script>
var styleInt = 1;
function selectStyle(n) {
	styleInt = n;
}
function editCard(){
	  var cardId  = $("#cardId").val();
	  var name = $("#user-title").val();
	  var location = $("#yourcityId").val();
	  var occupation = $("#careerId").val();
	  var hobby = $("#interestId").val();
	  var description = $("#edit-description").val();
	  var background = $("#backgroundValId").val();
	  var objp={};
	  objp.cardId = cardId;
	  objp.name=name;
	  objp.location =location;
	  objp.occupation =occupation;
	  objp.hobby = hobby;
	  objp.description =description;
	  objp.styleInt = styleInt;
	  if(background==null||background=="") {
		  var k=GetRandomNum(0,7)
		  background="bg_"+k+".jpg";
	  }
	  objp.background = background;
	  var linkStr= "";
	  var link1  = $("#link1Id").val();
	  var link2  = $("#link2Id").val();
	  var link3  = $("#link3Id").val();
	  var link4  = $("#link4Id").val();
	  var link5  = $("#link5Id").val();
	  if (link1 !=null && link1 !="") {
		  linkStr=link1
	  }
	  if (link2 !=null && link2 !="") {
		  linkStr=linkStr+","+link2
	  }
	  if (link3 !=null && link3 !="") {
		  linkStr=linkStr+","+link3
	  }
	  if (link4 !=null && link4 !="") {
		  linkStr=linkStr+","+link4
	  }
	  if (link5 !=null && link5 !="") {
		  linkStr=linkStr+","+link5
	  }
	 
	  objp.links=linkStr;
	   $.ajax({
			  url: '${path}/core/editCard',
			  type: 'POST',
			  timeout: 30000,
			  cache : false,
		      data :objp,
		      async: false,
			  success:function(msg){
				 // window.location.href='http://localhost:8080/youoor/home.jsp';
				 alert("保存成功");
			   },
			   failure:function(msg){
				   alert(eval('('+msg.responseText+')').error_text);
			   		
			   },
			   error:function(msg){
				   alert(eval('('+msg.responseText+')').error_text); 
			   }
		});
}
$(function() { 
	if(!checkLogin()){
		return;
	}
	loadCard();
});

function loadCard(){
	objp= {}
	   $.ajax({
			  url: '${path}/core/getCardInfoByUserId',
			  type: 'POST',
			  timeout: 30000,
			  cache : false,
		      data :objp,
		      async: false,
			  success:function(msg){
				  setCardInfo(msg.cardInfo)
			   },
			   failure:function(msg){
				   alert(eval('('+msg.responseText+')').error_text);
			   		
			   },
			   error:function(msg){
				   alert(eval('('+msg.responseText+')').error_text); 
			   }
		});
}

function setCardInfo(cardInfo){
	if (cardInfo != null) {
		cardObj = cardInfo.userCard;
		if (cardObj) {
		   $("#cardId").val(cardObj.cardId);
		   $("#user-title").val(cardObj.name);
		   $("#yourcityId").val(cardObj.location);
		   $("#careerId").val(cardObj.occupation);
		   $("#interestId").val(cardObj.hobby);
		   $("#edit-description").val(cardObj.description);
	       $("#backgroundId").attr("src",imgDomain+cardObj.background);
           $("#backgroundValId").val(cardObj.background);
           $("#backgroundId").css("width",150).css("height",100);
           styleInt = cardObj.styleInt;
           if(styleInt==null) {
        	   styleInt=1;
           }
           $("#c"+styleInt+"Id").addClass("current-on");
	       	linksObj = cardInfo.links;
			if (linksObj) {
				for(var i=0;i<linksObj.length;i++){
					var idstr = "#link"+(i+1)+"Id";
					$(idstr).val(linksObj[i].linkUrl);
				}
			}
		}else{
			if(loginUserId == null || loginUserId=="") {
				window.location.href='${path}/index.jsp';
			}
			
		}
	
	} 
}

function getUpToken() {
	var token = "";
	 $.ajax({
		  url: '${path}/core/getUpToken',
		  type: 'POST',
		  timeout: 30000,
		  cache : false,
	      data :objp,
	      async: false,
		  success:function(msg){
			  //setCardInfo(msg.cardInfo)
			  token =  msg.uptoken;
		   },
		   failure:function(msg){
			   alert(eval('('+msg.responseText+')').error_text);
		   		
		   },
		   error:function(msg){
			   alert(eval('('+msg.responseText+')').error_text); 
		   }
	});
	 return token;
}

//上传北京图片
$(function() {
var wei7 = generateMixed(7); 	
var uptokenStr = getUpToken();
var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4',    //上传模式,依次退化
    browse_button: 'up_bg_img',       //上传选择的点选按钮，**必需**
    //uptoken_url: '/youoor/core/getUpToken',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
    // downtoken_url: '/downtoken',
    // Ajax请求downToken的Url，私有空间时使用,JS-SDK将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
    uptoken : uptokenStr, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
    // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
    // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
    domain: 'http://youoor.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**
    container: document.getElementById('up_bg_img_parentId'),          //上传区域DOM ID，默认是browser_button的父元素，
    max_file_size: '100mb',           //最大文件体积限制
    flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
    max_retries: 2,                   //上传失败最大重试次数
    //dragdrop: true,                   //开启可拖曳上传
    //drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
    chunk_size: '4mb',                //分块上传时，每片的体积
    auto_start: true,   
    unique_names: false ,
    save_key: false,//选择文件后自动上传，若关闭需要自己绑定事件触发上传,
    init: {
        'FilesAdded': function(up, files) {
            plupload.each(files, function(file) {
                // 文件添加进队列后,处理相关的事情
            	uploader.start();
            	return true;
            });
        },
        'BeforeUpload': function(up, file) {
               // 每个文件上传前,处理相关的事情
        },
        'UploadProgress': function(up, file) {
               // 每个文件上传时,处理相关的事情
        },
        'FileUploaded': function(up, file, info) {
               // 每个文件上传成功后,处理相关的事情
               // 其中 info 是文件上传成功后，服务端返回的json，形式如
               // {
               //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
               //    "key": "gogopher.jpg"
               //  }
               // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                //var domain = up.getOption('domain');
               /// var res = parseJSON(info);
               // var sourceLink = domain + res.key;// 获取上传成功后的文件的Url
              
               $("#backgroundId").attr("src",imgDomain+loginUserId+"_"+wei7+file.name);
               $("#backgroundId").css("width",150);
               $("#backgroundValId").val(loginUserId+"_"+wei7+file.name);
        },
        'Error': function(up, err, errTip) {
        	alert(err.code+"--"+err.message);
               //上传出错时,处理相关的事情
        },
        'UploadComplete': function() {
               //队列文件处理完毕后,处理相关的事情
               
        },
        'Key': function(up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效
            var key = loginUserId+"_"+wei7+file.name;
            // do something with key here
            return key
        }
    }
});
});

//************************************

</script>
</html>
